<template>
  <li class="item">
    <label :for="todo.id">
      <input type="checkbox" :checked="todo.done" @change="hanldeClick(todo.id)">
      <span>{{todo.title}}</span>
    </label>
    <button class="btn btn-danger" style="display: none;">删除</button>
  </li>
</template>

<script>
  export default {
    name: "MyItem",
    // 声明接收todo对象
    props: ['todo', 'checkTodo'],
    methods: {
      hanldeClick(id) {
        // 通知App组件将对应的todo对象的done值取反
        this.checkTodo(id)
      }
    },
    mounted() {
      console.log(this.todo)
    }
  }
</script>

<style lang="less">
  .item {
    padding: 10px 6px;
    & + .item {
      border-top: 1px solid #ddd;
    }
  }
</style>